<template>
<!-- 容器 -->
  <div class="charts" ref="charts"></div>
</template>

<script>
//引入echarts
import * as echarts from 'echarts';
export default{
    name:"",
    mounted(){
        // 初始化echarts实例
        let lineCharts = echarts.init(this.$refs.charts);
        // 配置数据
        lineCharts.setOption({
            yAxis:{
                show:false
            },
            xAxis:{
                show:false,
                type:"category",
                boundaryGap: false,
            },
            grid:{
                left:0,
                top:0,
                right:0,
                bottom:0,
            },
            series:[
                {
                    type:"line",
                    data:[10,7,33,12,8,25],
                    smooth:true,
                    // 拐点样式
                    itemStyle:{
                        opacity:0
                    },
                    // 线条的颜色
                    lineStyle:{
                        color:"purple"
                    },
                    // 区域填充颜色
                    areaStyle:{
                        color:{
                            type:"linear",
                            x:0,
                            y:0,
                            x2:0,
                            y2:1,
                            colorStops:[
                                {
                                    offset:0,
                                    color:"purple", // 0%处的颜色
                                },
                                {
                                    offset:1,
                                    color:"#fff" // 100%处的颜色
                                },
                            ],
                            global:false,//缺省为false
                        }
                    }
                }
            ]
        })
    }
}
</script>

<style scoped>
.charts{
    height:100%;
    width:100%;
}
</style>